<template>
  <div class="tab">
    <a-form :label-col="labelCol" :model="searchData" style="margin-top: 24px">
      <a-space :wrap="true">
        <a-form-item label="活动名称" name="name">
          <a-input v-model:value="searchData.name" placeholder="提供完整的手机号" />
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-select
            v-model:value="searchData.status"
            class="inputW"
            :options="statusOption"
            placeholder="全部"
          >
          </a-select>
        </a-form-item>
      </a-space>

      <a-form-item>
        <div style="float: right">
          <a-button style="margin-right: 20px" type="primary" @click="onSubmit">查询</a-button>
          <a-button @click="resetForm">重置</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TSearch } from './type.dict'

const statusOption = [
  {
    label: '全部',
    value: '',
  },
  {
    label: '下架',
    value: 'CLOSE',
  },
  {
    label: '上架',
    value: 'OPEN',
  },
]

const labelCol = {
  style: { width: '78px', marginBottom: '16px', marginRight: '6px', textAlign: 'right' },
}
const emit = defineEmits(['search'])
const prop = defineProps<{
  searchValue: TSearch
}>()
const searchData = ref<TSearch>({ ...prop.searchValue })

// 提交搜索
const onSubmit = () => {
  emit('search', searchData.value)
}
// 重置搜索
const resetForm = () => {
  searchData.value = {
    name: '',
    status: '',
    progress: '',
  }
}
defineExpose({
  onSubmit,
})
</script>
<style lang="stylus" scoped>
.tab {
  padding 28px 16px 20px 16px;
  box-sizing: border-box;
  background: #F9FAFB;
  border-radius: 4px;
}

:deep(.ant-form-item) {
  margin-bottom: 0px;
}
.inputW{
  width 120px
}
</style>
